<template >
    <div class="section">
        <div>
            <!--热门推荐-->
            <div class="swiper-container"
                 ref="slider">
                <div   class="swiper-wrapper">
                    <div class="swiper-slide" v-for="s in slides">
                        <img :src="s.img_url"/>
                    </div>
                </div>
                <div class="swiper-pagination"
                     ref="pagination">
                </div>
            </div>
            <div class="announcement">
                <label>快讯</label>
                <span>{{announcement}}</span>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Swiper from "swiper"
    import 'swiper/dist/css/swiper.css'
    export default{
       props:['slides','announcement'],
        mounted(){
            window.setTimeout(function(){
                new Swiper('.swiper-container',{//this.$refs.slider,{
                    pagination:'.swiper-pagination',//this.$refs.pagination,
                    paginationClickable:true,
                    spacebetween:30,
                    centeredSlides:true,
                    autoplay:2500,
                    autoplayDisableOnInteraction:false,
                })
            },1000)
            }
    }
</script>